<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import router from '../router';
const route = useRoute()
const onClickLeft = () => {
    router.push('/order')
};
const show2 = ref(false)
const onClickRight = () => {
    show2.value = true;
}
import { getOrderByOrderId } from '../apis/order.js'
const order = ref({})
const time = ref(300000)
//获取订单信息及详情
async function getOrder() {
    const res = await getOrderByOrderId(parseInt(route.query.id))
    order.value = res.data.data

    const date = new Date(order.value.orderTime);
    //获得下单时间时间戳
    const orderTime = date.getTime();
    console.log(orderTime);
    const now = Date.now();
    console.log(now);
    //下单时间+5分钟
    time.value = orderTime + 300000 - now;
    console.log(time.value);
}
getOrder()
//支付方式
const payMethod = ref(1)
//密码输入框
const value = ref('');
const showKeyboard = ref(true);
const show = ref(false);

function pay() {
    value.value = '';
    show.value = true;
    console.log(value);
}
import { watch } from 'vue';
import {paySuccess} from '../apis/order.js'
watch(value, async (newValue, oldValue) => {
    if (newValue.length === 6) {
        show.value = false;
        //支付成功
        await paySuccess(parseInt(route.query.id),payMethod.value)
        router.push('/paySuccess')
    }
});
import { showNotify, showToast } from 'vant';
import { cancelOrder } from '../apis/order.js'
const overtime = ref(false)
function onFinish (){
    overtime.value = true;
}

watch(overtime, async (newValue, oldValue) => {
    if (overtime.value = true) {
        console.log("支付超时");
        //订单自动取消
        await cancelOrder(route.query.id)
        //提示订单已超时 请重新下单 
        showNotify({
            type: 'warning',
            message: '订单已超时,请重新下单!',
            duration: 2000, 
        });
        //跳转到订单页面
        router.push('/order')
    }

})


</script>
<template>
    <div>
        <van-nav-bar title="支付" left-text="返回" right-text="订单详情" left-arrow @click-left="onClickLeft"
            @click-right="onClickRight" />
        <div style="margin-left: 38%;margin-top: 10%;">
            <h1>¥{{ order.amount }}</h1>
        </div>
        <div style="margin-left: 32%;">
            <h2>支付剩余时间</h2>
        </div>
        <div style="margin-left:44%;">
            <van-count-down @finish="onFinish" :time="time" />
        </div>



        <div style="font-size: 20px;margin-top: 20%">支付方式</div>
        <div style="margin-left: 21%;margin-top: 10%;">
            <img src="../assets/1.png" style="width: 100px; height: 100px;margin-right: 30px;">
            <img src="../assets/2.png" style="width: 100px; height: 100px;">
            <van-radio-group v-model="payMethod" direction="horizontal">
                <van-radio :name="1" label-position="left" style="margin-left: 1%;">支付宝</van-radio>
                <van-radio :name="2" label-position="left" style="margin-left:19%;">微信</van-radio>
            </van-radio-group>
        </div>

        <van-action-bar>
            <van-action-bar-button type="danger" text="确认支付" @click="pay()" />
        </van-action-bar>


        <van-action-sheet v-model:show="show" title="请输入支付密码" style="height: 360px;">
            <!-- 密码输入框 -->
            <van-password-input :value="value" :focused="showKeyboard" @focus="showKeyboard = true" />
            <!-- 数字键盘 -->
            <van-number-keyboard v-model="value" :maxlength="6" :show="showKeyboard" />
        </van-action-sheet>

        <van-dialog v-model:show="show2" title="订单详情" showCancelButton cancelButtonText="关闭" :showConfirmButton="false">
            <h4 style="margin-left: 10px;">收货地址</h4>
            <div style="margin-left: 10px;">{{ order.address }}</div>
            <div style="margin-left: 10px;">{{ order.consignee }} {{ order.phone }}</div>


            <h4 style="margin-left: 10px;">菜品信息</h4>
            <div v-for="item in order.orderDetailList" :key="item" style="margin-left: 10px;">
                {{ item.name }} x{{ item.number }}
            </div>
            <h4 style="margin-left: 10px;">备注信息</h4>
            <div style="margin-left: 10px;">
                {{ order.remark ? order.remark : '暂无' }}
            </div>

        </van-dialog>
    </div>
</template>